<!-- 登录 -->
<template>
  <div class="login">
    <div>
      <div class="title">人力资源智能报表</div>
      <van-form @submit="onSubmit" class="form">
        <van-field
          v-model="username"
          name="username"
          label="账号"
          placeholder="账号"
          :rules="[{ required: true, message: '请填写账号' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit"> 提交 </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onBeforeMount, onMounted, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
export default {
  name: "",
  setup() {
    //获取实例 使用全局挂载
    const { proxy } = getCurrentInstance();
    const router = useRouter();
    const data = reactive({
      username: "",
      password: "",
    });
    onBeforeMount(() => {});
    onMounted(() => {});
    const onSubmit = async (values) => {
      const { data } = await proxy.$api.login({
        username: values.username,
        password: values.password,
      });
      if (data.success) {
        proxy.$storage._session.set("token", data.obj);
        router.push({ path: "/home" });
        proxy.$Toast.success("登录成功");
      } else {
        proxy.$Toast.fail(data.msg);
      }
    };

    const refData = toRefs(data);
    return {
      ...refData,
      onSubmit,
    };
  },
};
</script>
<style scoped lang="scss">
.login {
  height: 100vh;
  background: url("../../assets/images/login/bg.jpg");
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .form {
    width: 100%;
    .van-field {
      margin: 10px 0;
      border-radius: 5px;
    }
  }
  .title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
  }
}
</style>
